<!DOCTYPE html>
<html lang="en">

<!--
  User：蓝田_Loto
  Date：2018-09-26 15:17
  PageName：b_ProgressInformation.html
  Function：进度信息（没有看到想要的效果，估计是浏览器版本过低问题，待测试解决）
  URL：http://localhost:8080/e_design_html5/b_ProgressInformation.html
-->

<head>
    <meta charset="UTF-8">
    <title>进度信息</title>

    <script>
        function click1() {
            var progress = document.getElementById('progress');
            progress.getElementsByTagName('span')[0].textContent = "0";
            for (var i = 0; i <= 100; i++)
                updateProgress(i);
        }

        function updateProgress(newValue) {
            var progress = document.getElementById('progress');
            progress.value = newValue;
            progress.getElementsByTagName('span')[0].textContent = newValue;
        }
    </script>
</head>

<body>

<section>
    <p>百分比进度:
        <progress id="progress" max="100">
            <span>0</span>%
        </progress>
    </p>
    <input type="button" onclick="click1()" value="显示进度"/>
</section>
</body>
</html>